<template>
  <div class="coupon-list">
    <SearchForm
      v-model="formOption.data"
      :form-option="formOption"
      :show-btn="true"
      :btn-list="btnList"
      label-width="100px"
    />

    <PageTable :columns="columns" :data="dataSource" />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getCouponList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
export default {
  name: 'CouponList',
  data() {
    return {
      formOption: {
        data: {},
        items: [
          {
            type: 'input',
            label: '礼品券名称',
            value: 'couponName'
          },
          {
            type: 'datetimerange',
            label: '新增时间',
            value: 'time',
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getCouponList()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.formOption.data = {}
            this.getCouponList()
          }
        }
      ],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      dataSource: [],
      columns: [
        {
          prop: 'name',
          label: '礼品券名称'
        },
        {
          prop: 'total',
          label: '总张数'
        },
        {
          prop: 'notLibraryTotal',
          label: '未出库'
        },
        {
          prop: 'thenCashTotal',
          label: '已兑换'
        },
        {
          prop: 'notCashTotal',
          label: '未兑换'
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          prop: 'isEnable',
          label: '是否启用',
          render: (h, { row }) => {
            return (
              <span style={row.isEnable ? '' : 'color: #fc4541'}>{row.isEnable ? '是' : '否'}</span>
            )
          }
        },
        {
          prop: 'isInvalid',
          label: '是否作废',
          render: (h, { row }) => {
            return (
              <span style={row.isInvalid ? 'color: #fc4541' : ''}>
                {row.isInvalid ? '是' : '否'}
              </span>
            )
          }
        },
        {
          prop: 'createdTime',
          label: '新增时间'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.viewDetail(row)}>
                  查看
                </el-button>
                <PopConfirm title={'确认导出该礼品券吗？'} confirm={() => this.exportFile(row)}>
                  <el-button class="ml-10" type="text">
                    导出
                  </el-button>
                </PopConfirm>
                {!row.isEnable ? (
                  <el-button class="ml-10" type="text" onClick={() => this.upadtedStatus(row)}>
                    启用
                  </el-button>
                ) : (
                  <el-button class="ml-10" type="text" onClick={() => this.upadtedStatus(row)}>
                    隐藏
                  </el-button>
                )}
                {!row.isInvalid ? (
                  <PopConfirm
                    title={'确认作废该礼品券吗？'}
                    confirm={() => this.invalidCoupon(row.id)}
                  >
                    <el-button class="mr-10" type="text" style={'color: #333'}>
                      作废
                    </el-button>
                  </PopConfirm>
                ) : (
                  <PopConfirm
                    title={'确认删除该礼品券吗？'}
                    confirm={() => this.deleteCoupon(row.id)}
                  >
                    <el-button type="text" style={'color: #333'}>
                      删除
                    </el-button>
                  </PopConfirm>
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.getCouponList()
  },
  mounted() {},
  methods: {
    async getCouponList() {
      const params = {
        ...this.listQuery
      }
      const { couponName, time } = this.formOption.data
      if (couponName) params.couponName = couponName
      if (time) params.startTime = time[0] && time[0]
      if (time) params.endTime = time[1] && time[1]
      const {
        data: { total, records }
      } = await this.$http.coupon.voucherApi.getCouponList({ params })
      this.dataSource = records
      this.total = total
    },
    // 更新状态
    async upadtedStatus({ isEnable, id }) {
      let message = isEnable ? '已隐藏' : '已启用'
      const { status, msg } = await this.$http.coupon.voucherApi.upadtedStatus({
        isEnable: !isEnable,
        couponId: id
      })
      if (status === 200) {
        this.getCouponList()
        this.$message.success(message)
      } else {
        this.$message.error(msg)
      }
    },
    // 删除
    async deleteCoupon(couponId) {
      const { status, msg } = await this.$http.coupon.voucherApi.deleteCoupon(couponId)
      if (status === 200) {
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getCouponList()
        this.$message.success('删除成功！')
      } else {
        this.$message.error(msg)
      }
    },
    // 作废
    async invalidCoupon(couponId) {
      const { status, msg } = await this.$http.coupon.voucherApi.invalidCoupon(couponId)
      if (status === 200) {
        this.getCouponList()
        this.$message.success('已作废！')
      } else {
        this.$message.error(msg)
      }
    },
    // 导出
    exportFile(row) {
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      const list = [{ ...row }]
      const tableData = list.map(item => {
        item.isEnable = item.isEnable ? '是' : '否'
        item.isInvalid = item.isInvalid ? '是' : '否'
        return item
      })
      export2Excel(headerData, tableData, filterData, `${row.name}`, () => {
        this.$message.success('导出成功！')
      })
    },
    viewDetail({ id }) {
      this.$router.push({ name: 'CouponDetail', query: { id } })
    }
  }
}
</script>

<style lang="scss" scoped></style>
